iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

30天零負擔輕鬆學會製作APP介面及設計系列 第 19

30天零負擔輕鬆學會製作APP介面及設計【DAY 19】

  • 分享至 

  • xImage
  •  

大家好,我是YIYI,今天我要來製做體重的頁面。

點哪些地方可以進到這個頁面呢?

第一個是從HOMEPAGE的下排最左側ICON進入~
https://ithelp.ithome.com.tw/upload/images/20210928/20140979aiqj5YAbUH.png
第二個是從LIST的體重進入~
https://ithelp.ithome.com.tw/upload/images/20210928/20140979MUJeGgyHW9.png

體重介面

介面設計的部分,我想在這頁的右上角放一個藍芽的ICON,用來表示裝置以藍芽連接體重機。
在藍芽的旁邊也有一個手動紀錄的功能,為的就是能夠讓體重機不支援的使用者們可以使用這款APP。
那在數值的部分,我挑選了我認為比較有用的數據放在頁面能夠一目了然的位置。
包了體重、基礎代謝、BMI、肌肉、身體年齡、肥胖度這幾項數據。
上方還有列出理想體重、與上次相差多少公斤,能直接看最上方就了解自己和理想體重還差多少。
在初步拉完ICON後頁面長這樣~
https://ithelp.ithome.com.tw/upload/images/20210928/20140979bALuhdLsrK.png
在上色的時候我是了蠻多種搭配,這是我認為看起來最舒服的樣式!/images/emoticon/emoticon37.gif
https://ithelp.ithome.com.tw/upload/images/20210928/2014097915gjwHcC1X.png
今天就到這邊,謝謝大家的閱讀/images/emoticon/emoticon29.gif


上一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 18】
下一篇
30天零負擔輕鬆學會製作APP介面及設計【DAY 20】
系列文
30天零負擔輕鬆學會製作APP介面及設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言